<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('积存量变化趋势图')"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight" style="height: 95%">


    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>积存量变化趋势图</h5>
            <div class="ibox-tools">
                <a class="collapse-link">
                    <i class="fa fa-chevron-up"></i>
                </a>
                <!--<a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">-->
                    <!--<i class="fa fa-wrench"></i>-->
                <!--</a>-->
                <!--<ul class="dropdown-menu dropdown-user">-->
                    <!--<li><a href="graph_flot.html#">选项1</a>-->
                    <!--</li>-->
                    <!--<li><a href="graph_flot.html#">选项2</a>-->
                    <!--</li>-->
                <!--</ul>-->
                <a class="close-link">
                    <i class="fa fa-times"></i>
                </a>
            </div>
        </div>
        <div class="ibox-content h-full">
            <div class="echarts  h-full" id="echarts-axis-chart"></div>
        </div>
    </div>


</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js"/>
<script type="text/javascript">

    var prefix = ctx + "yf/reports";

    var axisChart = echarts.init(document.getElementById("echarts-axis-chart"));

    // 日期、积存量（已入库未出库：20）
    var echartData = [];
    // echartData = [
    //         {statisticsDate:'6-8',value:0},
    //         {statisticsDate:'6-2',value:8},
    //         {statisticsDate:'6-1',value:0},
    //         {statisticsDate:'5-31',value:0},
    //         {statisticsDate:'5-30',value:0},
    //         {statisticsDate:'5-29',value:10},
    //         {statisticsDate:'5-28',value:0},
    //         {statisticsDate:'5-27',value:0}];


    $(function () {

        Initialize();

        axisChart.on('click', function (params) {
            if (params.seriesType == 'bar') {
                console.log(params);
                alert(params);
                // Initialize(params.data.disId);
            }
        })
    });


    function Initialize() {
        $.post(prefix + "/echarets/storageAxisList", {}, function (res) {
            if (res.code == 0) {
                echartData = res.rows;
                // res.rows.forEach(function (val, index, arr) {
                //     var v = {
                //         name: val.statisticsDate,   // 地区名
                //         value: val.value  // 存积量值
                //     }
                //     echartData.push(v);
                // });
                // for(var i=0;i<echartData.length;i++){
                //     console.log( echartData[i].statisticsDate + "    " + echartData[i].value );
                // }
                // option.series[0].data = echartData;

                var option = {
                    // title: {
                    //     text: '积存量变化趋势图',
                    //     formatter:"{a} kg"
                    // },
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: echartData.map( x => {return x.statisticsDate + ""} )
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}Kg'
                        },
                    },
                    series: [
                        {
                            name:'总积存量（kg）',
                            type:'line',
                            color:'#1CCED1',
                            label:{
                                normal:{
                                    show:true
                                }
                            },
                            data:echartData
                        }
                        // ,
                        // {
                        //     name:'预警值（kg）',
                        //     type:'line',
                        //     label: {
                        //         normal: {
                        //             show: true
                        //         },
                        //     },
                        //     data: echartData
                        // }
                        // ,
                        // {
                        //     name:'平均值',
                        //     type:'line',
                        //     data:echartData,
                        //     markLine: {
                        //         data: [
                        //             {type: 'average', name: '平均值',symbol: 'circle',
                        //                 label: {
                        //                     normal: {
                        //                         position: 'end',
                        //                         formatter: '平均值'
                        //                     }
                        //                 }
                        //             }
                        //         ]
                        //     }
                        // }
                    ]
                };

                axisChart.setOption(option);
                $(window).resize(axisChart.resize);
            }

        });
    }


</script>
</body>
</html>